<template>
    <div class="myContainer">
        <!-- 加入购物车的小球动画 -->
        <!-- 注意： 钩子函数动画，这些钩子函数，都是通过事件绑定机制，绑定到transition元素上 -->
         <transition
          @before-enter = "beforeEnter"
          @enter = "enter"
          @sfter-enter = "afterEnter"
        >
            <div class="ball" v-show="flag"></div>
        </transition>
        <!-- 商品轮播图区域 -->
        <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <swiper :lunbotu="lunbotu" :imgname="'src'"></swiper>
                    </div>
                </div>
		</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p class="price">
                            <span>市场价：<del>{{goodsinfo.market_price}}</del></span>
                            <span style="color:red">销售价：￥{{goodsinfo.sell_price}}</span>
                        </p>
                        <p>
                            购买数量：<numbox :max="goodsinfo.stock_quantity" style="display:inline-block" @func="getSelectedCount"></numbox>
                        </p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="ballOut">加入购物车</mt-button>
                    </div>
                </div>
		</div>
        <!-- 商品详情区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p>商品货号：{{goodsinfo.goods_no}}</p>
                        <p>库存数量：{{goodsinfo.stock_quantity}}</p>
                        <p>上架时间：{{goodsinfo.add_time | dataFormat}}</p>
                    </div>
                </div>
            <div class="mui-card-footer btnarea">
                <mt-button type="primary" size="large" plain @click="goDesc">图片介绍</mt-button>
                <mt-button type="danger" size="large" plain>商品评论</mt-button>
            </div>
		</div>
    </div>
</template>

<script>
import swiper from '../sub-components/Swiper.vue'
import numbox from '../sub-components/goodsinfo_numbox.vue'
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
            lunbotu: [],
            goodsinfo: [],
            flag: false, // 小球初始时不显示
            selectedCount: 1, // 用户选择的商品购买数量，默认选中了一个
        }
    },
    created() {
        this.getLunbotu(),
        this.getGoodsInfoById()
    },
    methods: {
        ...mapMutations(["addToCart"]),
        async getLunbotu(){
            const {data} = await this.$http.get("/api/getthumimages/" + this.id)
           if(data.status === 0) 
        //    console.log(data);
           return (this.lunbotu = data.message)
        },
        async getGoodsInfoById(){
            const {data} = await this.$http.get("/api/goods/getinfo/" + this.id)
            // console.log(data);
            if(data.status === 0)
            return (this.goodsinfo = data.message[0])
        },
        goDesc(){
            this.$router.push("/home/goodsdesc/" + this.id)
            // console.log(this);
        },
        ballOut(){
            this.flag = !this.flag;
            // 直接调用mapMutation中映射出来的方法
            this.addToCart({id: this.id,count: this.selectedCount,selected: true,price: this.goodsinfo.sell_price})
        },
        beforeEnter(el){
            // 入场动画开始之前，设置小球的起始位置
            el.style.transform = "translate(0,0)"
        },
        enter(el,done){
            // 入场动画结束之后，小球的终止位置
            // transform : 变形
            // translate : 位移
            // transition : 过渡效果
            el.offsetWidth;
            // 设置小球的入场动画终止状态


            // 动态获取小球的横纵坐标
            const ballPos = el.getBoundingClientRect()
            console.log(ballPos);
            // 动态获取点的横纵坐标[注意： 这里获取点的位置，和双向数据绑定没有任何关系，所以，可以直接使用普通的DOM操作]
            // DOM操作的优势： 不论要操作那个组件，只要这个元素属于document，那么就能够直接获取到
            const badgePos = document.getElementById("badge").getBoundingClientRect()
            const left = badgePos.left - ballPos.left
            const top = badgePos.top - ballPos.top

            el.style.transform = "translate("+left+"px,"+top+"px)"
            // 设置小球的过渡效果
            // 贝塞尔曲线在线生成器
            el.style.transition = "all 0.5s cubic-bezier(.46,-0.4,1,.49)"
            // 当入场动画完成之后，需要动手调用一下done回调函数，直接跳过小球的出场动画
            done()
        },
        afterEnter(el){
            // 入场动画完成之后的回调函数
            this.flag = !this.flag
        },
        getSelectedCount(c){
            // 获取选择的商品数量
            console.log("父组件中拿到的传递过来的count值是：" + c);
            // 把 用户选择的最新数据的数量值，保存到data中，方便用户点击加入购物车按钮的时候，把数量同步到红色徽标中
            this.selectedCount = c
        }
    },
    props: ["id"],
    components: {
        swiper,
        numbox
    }
}
</script>

<style lang="scss">
    .myContainer{
        background-color: rgba(218, 214, 214, 0.933);
        overflow: hidden;
    }
    .btnarea{
        flex-direction: column;
        button + button{
            margin-top: 10px;
        }
        padding-bottom: 40px;
    }
    // .price{
    //     display: flex;
    //     justify-content: space-between;
    // }
    .ball{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: red;
        position:absolute;
        left: 147px;
        top: 335px;
        z-index: 99;
        // 小球移动的位置
        // transform: translate(89px,285px);
    }
</style>